<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <script src="../js/echarts/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
  <div id="month_machine" style="width: 600px;height:400px;"></div>
  <div id="month_ad" style="width: 600px;height:400px;"></div>
</body>

<script>
  // 基于准备好的dom，初始化echarts实例
  var month_machine = echarts.init(document.getElementById('month_machine'));
  var month_ad = echarts.init(document.getElementById('month_ad'));


  var dataAxis = ['10-01', '10-05', '10-10', '10-15', '10-20', '10-25', '10-30', '11-05', '11-10', '11-15', '11-20'];
  var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 750];

  // 获取数组最大值
  var yMax = Math.max.apply(null, data);


  // 初始化背景柱子
  var dataShadow = [];
  for (var i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
  }

  option = {
    title: {
      text: '月机器出库走势图（台）',
      subtext: ''
    },
    xAxis: {
      data: dataAxis,
      axisLabel: {
        // inside: true,
        textStyle: {
          color: '#666666'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#999999',
        }
      },
      splitLine: {
        show: false
      },
      z: 10
    },
    yAxis: {
      splitLine: {　　　　
        show: false　　
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#999999',
        }
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: '#666666'
        }
      }
    },
    dataZoom: [{
      type: 'inside', // 点击滑动
      // type: 'slider', // 底部滑动
      backgroundColor: "#FFF",
      dataBackground: "#000",
      fillerColor: "#FFDB47"
    }],
    series: [{ // For shadow
      type: 'bar',
      barWidth: '15px', // 背景柱子的宽度  
      itemStyle: {
        normal: {
          color: 'rgba(0,0,0,0.05)'
        }
      },
      barGap: '-100%', // 背景柱子
      data: dataShadow,
      animation: false
    }, {
      type: 'bar',
      barWidth: '15px', // 实际数据柱子的宽度  
      itemStyle: {
        normal: {
          color: function(params) {
            // 设置柱子颜色
            return (params.dataIndex % 2) == 0 ? '#FFDB47' : '#666666';
          }
        },
      },
      data: data
    }]
  };

  // 设置柱子的值
  month_machine.setOption(option);
  month_ad.setOption(option);

  // Enable data zoom when user click bar.
  var zoomSize = 6;
  month_machine.on('click', function(params) {
    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    month_machine.dispatchAction({
      type: 'dataZoom',
      startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
      endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
    });
  });
</script>

</html>